<template>
	<div class="spaceWrap">
		<div class="spaceBanner">
			<img src="../../img/spaceBg.png"/>
			<div class="personCenter gerenzhongxin" v-if="isLogin">
				<div class="touxiang">
					<span><img src="../../img/noface.gif"/></span>
					<a href="#">账号资料</a>
				</div>
				<div class="mingzi">
					<p>挺少</p>
					<p>
						<svg class="index__icon__src-space-info- " aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-zhongxing"></use></svg>
					</p>
					<p>
						<span><img src="//s1.hdslb.com/bfs/static/mult/images/lv0.png"/></span>
						<span></span>
					</p>
				</div>
				<div class="guanzhu">
					<p>
						<span>0</span>
						<span>关注</span>
					</p>
					<p>
						<span>0</span>
						<span>粉丝</span>
					</p>
				</div>
			</div>
			<div v-else class="loginField">
				<div class="register">
					<router-link to="/register">注册</router-link>
				</div>
				<div class="login">
					<router-link to="/login">登陆</router-link>
				</div>
			</div>
		</div>
		<div class="clear"></div>
		<div class="tabWrap">
			<div class="tabCon " :class="{active:tabIndex==1}" @click="changeTab(1)">
				<span>历史记录</span>
			</div>
			<div class="tabCon":class="{active:tabIndex==2}"  @click="changeTab(2)">
				<span>我的投稿</span>
			</div>
		</div>
		<div class="history" v-show="tabIndex==1">
			<div class="noCon">
				<img src="../../img/noContent.png"/>
				<p>你还没有历史记录</p>
				<p>快去发现 <router-link to="/">新内容</router-link> 吧！</p>
			</div>
		</div>
		<div class="article" v-show="tabIndex==2">
			<div class="nologin">
				<img src="../../img/login.png"/>
			</div>
			<p>你还没有登录哦~</p>
			<p>赶快登录打开新世界的大门</p>
		</div>
		<div class="footer">
			<div class="textCon">
				<p>哔哩哔哩 沪ICP备13002172号-3</p>
				<p>信息网络传播视听节目许可证：0910417</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		created(){
			if(sessionStorage.getItem("isLogin")){
				this.isLogin=true
				console.log("this.isLogin",this.isLogin)
			}
		},
		data(){
			return {
				isLogin:false,
				tabIndex:1
			}
		},
		methods:{
			changeTab(index){
				index?index:1,
				this.tabIndex=index
			}
		}
	}
</script>

<style lang="scss" type="text/css">
	body{
		background-color:#f4f4f4 ;
	}
	.spaceWrap{
		padding-top: 50px;
		background: #f4f4f4;
	}
	.spaceBanner{
		width: 100%;
		position: relative;
		img{
			display: block;
			width: 100%;
		}
		.personCenter{
			/*position: absolute;*/
		}
	}
	.loginField{
		position: absolute;
		top: 53%;
		left: 25%;
		width: 50%;
		font-size: 12px;
		&:after{
			content: "";
			display: block;
			clear: both;
		}
		div[class]{
			width: 40%;
			border-radius: 8%;
			a{
				display: block;
				width: 100%;
				line-height: 25px;
				text-align: center;
			}
		}
	}
	.register{
		float: left;
		background: #fff;
		a{
			color: #fb7299;
		}
	}
	.login{
		float: right;
		background: #fb7299;
		a{
			color:#fff
		}
	}
	.tabWrap{
		width: 100%;
		border-top: 1px solid #979797;
		border-bottom: 1px solid #979797;
		padding: 8px 0;
		background: #fff;
		.tabCon{
			position: relative;
			float: left;
			width: 50%;
			text-align: center;
			font-size: 12px;
			color:#666;
		}
		&:after{
			content: "";
			display: block;
			clear: both;
		}
		.active{
			
			span{
				color: #fb7299;
				padding-bottom: 3px;
				border-bottom: 2px solid #fb7299;
			}
			
		}
	}
	.article{
		background: #fff;
		.nologin{
			position: relative;
			padding-top: 72px;
			padding-bottom:13px;
			img{
				display: block;
				width: 78%;
				margin: 0 auto 20px auto;
			}
		}
		p{
			text-align: center;
			font-size: 15px;
			color: #999;
			line-height: 17px;
		}
		p:nth-child(3){
			padding-bottom: 50px;
		}
	}
	.noCon{
		position: relative;
		padding-top: 72px;
		text-align: center;
		font-size: 12px;
		color: #999;
		img{
			display: block;
			width: 80%;
			margin: 0 auto;
		}
		p{
			line-height: 17px;
		}
		a{
			color: #fb7299;
		}
	}
	.footer{
		padding-top: 20px;
		padding-bottom: 34px;
		font-size: 12px;
		text-align: center;
		p{
			line-height: 20px;
			color: #999;
		}
	}
	.touxiang{
		span{
			position: absolute;
			top: -30%;
			left: 10px;
			width:25%;
			img{
				border-radius: 50%;
			}
		}
		a{
			position: absolute;
			top: 10px;
			right: 10px;
			color: #fb7299;
			border: 1px solid #fb7299;
			width: 90px;
			height: 30px;
			display: inline-block;
			text-align: center;
			line-height: 30px;
			border-radius: 4px;
		}
	}
	.mingzi{
		width:90%;
		margin:0 auto;
		padding-top: 70px;
		p{
			vertical-align: middle;
			margin-right: 10px;
			display: inline-block;
		}
		p:nth-child(1){
			font-weight: bolder;
		}
		p:nth-child(3){
			font-size: 0;
			span{
				display: inline-block;
				vertical-align: bottom;
			}
			span:nth-child(1){
				width: 40px;
				img{
					width: 100%;
				}
			}
			span:nth-child(2){
				width: 110px;
				height: 15px;
				background: #757575;
				border-radius: 0 20px 20px 0;
			}
		}
	}
	.guanzhu{
		width: 90%;
		margin: 0 auto;
		padding-top: 20px;
		color: grey;
		padding-bottom: 40px;
		p{
			display: inline-block;
		}
		p:nth-child(2){
			margin-left: 20px;
		}
	}
	.gerenzhongxin{
		background: white;
		position: relative;
	}
</style>